<template>
    <div>
        <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="tableConfig.tableData"
            size='small'
            @selection-change="handleSelectionChange"
            tooltip-effect="dark"
            style="width: 100%">
            <!-- 多选框 -->
            <el-table-column v-if="tableConfig.hasCheckbox" type="selection" width="55"></el-table-column>

            <template v-for="(item,index) in tableConfig.tableHeader">
                <!-- 有slot使用插槽模式渲染文本 -->
                <el-table-column :key="index" v-if="item.columnType === 'slot'" :label="item.label" :prop="item.prop" :width="item.width">
                    <template slot-scope="scope">
                        <slot :name="item.slotName" :data="scope.row"></slot>
                    </template>
                </el-table-column>

                <!-- 文本渲染 -->
                <el-table-column :key="index" :label="item.label" :prop="item.prop" :width="item.width" v-else></el-table-column>
            </template>
            
        </el-table>
    </div>
</template>


<!-- 
二次封装element-ui表格组件

其他配置看tableConfig里的注解
------------------------------
需插槽时，表头配置格式为：
{
    label:'[表头名]',
    prop:'[表格数据对应的变量名]',
    width:'[表格宽度]',
    columnType:'slot',
    slotName:'[具名插槽的名称]'
}

需插槽时，引入组件的格式为：
例：
 <Table :config="tableConfig" @getSelectRow="selectRow">
    <template v-slot:operation="bData">
        <el-button size="small" type="primary">修改</el-button>
        <el-button size="small" type="danger">删除</el-button>
    </template>
</Table>

@getSelectRow:将checkbox选中的对象数组返回给父组件
 -->
<script>
 export default {
    name: 'Table',
    props: {
        config:{
            type:Object,
            default:()=>{}
        }
    },
    components: {

    },
    data () {
        return {
            //表格的配置
            tableConfig:{
                //是否显示勾选框，默认勾选
                hasCheckbox:true,
                //表头配置
                tableHeader:[{
                    label:'姓名',
                    prop:'name',
                    width:'120',
                }],

                //表格数据
                tableData: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
            },
            loading:false
        }
    },
    methods: {
        //将父组件的初始值config循环赋值给当前对象的tableConfig
        setConfig(){
            let config = this.config;
            if(!config) return;
            let tableConfig = this.tableConfig;
            let keys = Object.keys(tableConfig);
            for(let key in config){
                if(keys.includes(key)){
                    tableConfig[key] = config[key];
                }
            }
        },

        //将当前选择的对象数组返回给父组件(用在checkbox的选择)
        handleSelectionChange(val){
            this.$emit('getSelectRow',val);
        }
    },
    mounted() {
        this.setConfig();
    },
    watch: {
        //监听父组件数据变化
        config:{
            handler(newV,oldV){
                // console.log(newV.tableData,oldV.tableData)
                this.tableConfig.tableData = newV.tableData;
            },
            deep:true,
        }
    },
    computed: {

    },
    filters: {

    }
 }
</script>

<style scoped>

</style>